<template>
  <div>
    <template v-for="item in options" :key="item.value">
      <el-tag
        v-if="item.value === value || item.value === String(value)"
        :type="item.elTagType || 'primary'"
        :class="item.elTagClass"
        :effect="effect"
      >
        {{ item.label }}
      </el-tag>
    </template>
    <span v-if="!matchedOption">{{ value }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface DictOption {
  label: string
  value: string | number
  elTagType?: 'primary' | 'success' | 'info' | 'warning' | 'danger'
  elTagClass?: string
}

interface Props {
  options: DictOption[]
  value: string | number | undefined
  effect?: 'dark' | 'light' | 'plain'
}

const props = withDefaults(defineProps<Props>(), {
  effect: 'light',
})

const matchedOption = computed(() => {
  return props.options.find(item => 
    item.value === props.value || item.value === String(props.value)
  )
})
</script>

<style lang="scss" scoped>
// 组件样式
</style>
